<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <title>黑马头条</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../../plugins/vant/index.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="../../../plugins/css/index.css">
</head>

<body>
<div id="app">
    <div class="article">
        <script>
                        var _authorApUserId= 4
        </script>
        <div style="display:none;">4</div>
            <van-row>
                <van-col span="24" class="article-title" >"互相"喂饼!内马尔有门不射就等大哥 梅西笑到起褶</van-col>
            </van-row>

            <van-row type="flex" align="center" class="article-header">
                <van-col span="3">
                    <van-image round class="article-avatar" src="https://p3.pstatp.com/thumb/1480/7186611868"></van-image>
                </van-col>
                <van-col span="16">
                    <div>admin</div>
                    <div>2022-8-7 16:47:56</div>

                </van-col>
                <van-col span="5">
                    <van-button round :icon="relation.isfollow ? '' : 'plus'" type="info" class="article-focus"
                                :text="relation.isfollow ? '取消关注' : '关注'" :loading="followLoading" @click="handleClickArticleFollow">
                    </van-button>
                </van-col>
            </van-row>
        <van-row class="article-content">
                        <van-col span="24" class="article-text">网易体育8月7日报道：</van-col>
                        <van-col span="24" class="article-text">在新赛季的前两场比赛中，姆巴佩分别因为停赛和受伤而缺席。在缺少姆皇的情况下，巴黎连续以4-0和5-0的比分赢得了胜利。尽管缺少了核心射手，但巴黎在梅西和内马尔的双核驱动之下，仍然迸发出了超群的战斗力。在法国超级杯中，梅西首开纪录，内马尔梅开二度。而在法甲首轮中，梅西2射1传，内马尔更是1射3传！这对好哥们之间的互相喂饼，更是简直“甜到发腻”。</van-col>
                        <van-col span="24" class="article-text">内马尔今夜首开纪录的进球，来自于梅西的助攻。萨拉维亚左路横传，梅西前点包抄，内马尔此时位于大禁区中路。梅西右脚轻轻一垫，他并没有选择射门，而是将球垫给了背后的内马尔。梅西这记脑后长眼式的传球，使得内马尔得到了轻松射门的空间，巴西人右脚大力低射破门。</van-col>
                        <van-col span="24" class="article-text">梅西的这次助攻，究竟是有意传给内马尔，还是射门踢疵变成了“被动助攻”？在社交网络上，大批球迷进行了讨论。按照常理而言，梅西在这一位置如果想要射门的话，会选择左脚推射远角而非右脚垫射。而且即便梅西想要右脚垫射，他也会用脚内侧推射，而不是用正脚背将球垫起。考虑到梅西拥有史诗级别的射术，阿根廷人这次处理球，更有可能就是故意要传给内马尔。</van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text">年少成名的内马尔，最服的人就是梅西。梅西之所以加盟巴黎，很大程度上就是因为内马尔说过“我最大的梦想就是再次和梅西合作”。在自己收获进球之后，内马尔就孜孜不倦地刻意为梅西做球。梅西的第一个进球，就是最典型的例子。在禁区左侧，内马尔完全可以选择单挑门将。但巴西人一直等待梅西前插，然后再为他送出无私横传。在梅西两次进球之后，内马尔都表现得比自己破门更开心。</van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text">在上赛季中，波切蒂诺始终没找到让梅西和内马尔共存的方法。如今，加尔蒂很好地解决了这一问题，巴黎新帅让梅西和内马尔分享球权。但在姆巴佩复出之后，这套体系是否还能延续却是个大大的问号。在拥有梅西和内马尔这两大10号的情况下，姆巴佩完全可以在锋线上安心吃饼。但以姆巴佩的自我定位，法国人可不仅仅认为自己是个“射门员”。如果姆巴佩想要更多球权的话，巴黎的进攻体系就得再重新磨合了。</van-col>
                        <van-col span="24" class="article-text">作者：张琳</van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text"></van-col>
        </van-row>

        <van-row type="flex" justify="center" class="article-action">
            <van-col>
                <van-button round :icon="relation.islike ? 'good-job' : 'good-job-o'" class="article-like"
                            :loading="likeLoading" :text="relation.islike ? '取消赞' : '点赞'" @click="handleClickArticleLike"></van-button>
                <van-button round :icon="relation.isunlike ? 'delete' : 'delete-o'" class="article-unlike"
                            :loading="unlikeLoading" @click="handleClickArticleUnlike">不喜欢</van-button>
            </van-col>
        </van-row>

        <!-- 文章评论列表 -->
        <van-list v-model="commentsLoading" :finished="commentsFinished" finished-text="没有更多了"
                  @load="onLoadArticleComments">
            <van-row id="#comment-view" type="flex" class="article-comment" v-for="(item, index) in comments" :key="index">
                <van-col span="3">
                    <van-image round src="https://p3.pstatp.com/thumb/1480/7186611868" class="article-avatar"></van-image>
                </van-col>
                <van-col span="21">
                    <van-row type="flex" align="center" justify="space-between">
                        <van-col class="comment-author" v-html="item.authorName"></van-col>
                        <van-col>
                            <van-button round :icon="item.operation === 0 ? 'good-job' : 'good-job-o'" size="normal"
                                        @click="handleClickCommentLike(item)">{{ item.likes || '' }}
                            </van-button>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col class="comment-content" v-html="item.content"></van-col>
                    </van-row>
                    <van-row type="flex" align="center">
                        <van-col span="10" class="comment-time">
                            {{ item.createdTime | timestampToDateTime }}
                        </van-col>
                        <van-col span="3">
                            <van-button round size="normal" v-html="item.reply" @click="showCommentRepliesPopup(item.id)">回复 {{
                                item.reply || '' }}
                            </van-button>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </van-list>
        <van-row>
            <van-col span="24" >
                <van-button round size="normal" @click="loadMoreComments">
                    查看更多
                </van-button>
            </van-col>
        </van-row>
    </div>
    <!-- 文章底部栏 -->
    <van-row type="flex" justify="space-around" align="center" class="article-bottom-bar">
        <van-col span="13">
            <van-field v-model="commentValue" placeholder="写评论">
                <template #button>
                    <van-button icon="back-top" @click="handleSaveComment"></van-button>
                </template>
            </van-field>
        </van-col>
        <van-col span="3">
            <van-button icon="comment-o" @click="handleScrollIntoCommentView"></van-button>
        </van-col>
        <van-col span="3">
            <van-button :icon="relation.iscollection ? 'star' : 'star-o'" :loading="collectionLoading"
                        @click="handleClickArticleCollection"></van-button>
        </van-col>
        <van-col span="3">
            <van-button icon="share-o"></van-button>
        </van-col>
    </van-row>

    <!-- 评论Popup 弹出层 -->
    <van-popup v-model="showPopup" closeable position="bottom"
               :style="{ width: '750px', height: '60%', left: '50%', 'margin-left': '-375px' }">
        <!-- 评论回复列表 -->
        <van-list v-model="commentRepliesLoading" :finished="commentRepliesFinished" finished-text="没有更多了"
                  @load="onLoadCommentReplies">
            <van-row id="#comment-reply-view" type="flex" class="article-comment-reply"
                     v-for="(item, index) in commentReplies" :key="index">
                <van-col span="3">
                    <van-image round src="https://p3.pstatp.com/thumb/1480/7186611868" class="article-avatar"></van-image>
                </van-col>
                <van-col span="21">
                    <van-row type="flex" align="center" justify="space-between">
                        <van-col class="comment-author" v-html="item.authorName"></van-col>
                        <van-col>
                            <van-button round :icon="item.operation === 0 ? 'good-job' : 'good-job-o'" size="normal"
                                        @click="handleClickCommentReplyLike(item)">{{ item.likes || '' }}
                            </van-button>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col class="comment-content" v-html="item.content"></van-col>
                    </van-row>
                    <van-row type="flex" align="center">
                        <!-- TODO: js计算时间差 -->
                        <van-col span="10" class="comment-time">
                            {{ item.createdTime | timestampToDateTime }}
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </van-list>
        <!-- 评论回复底部栏 -->
        <van-row type="flex" justify="space-around" align="center" class="comment-reply-bottom-bar">
            <van-col span="13">
                <van-field v-model="commentReplyValue" placeholder="写评论">
                    <template #button>
                        <van-button icon="back-top" @click="handleSaveCommentReply"></van-button>
                    </template>
                </van-field>
            </van-col>
            <van-col span="3">
                <van-button icon="comment-o"></van-button>
            </van-col>
            <van-col span="3">
                <van-button icon="star-o"></van-button>
            </van-col>
            <van-col span="3">
                <van-button icon="share-o"></van-button>
            </van-col>
        </van-row>
    </van-popup>
</div>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="../../../plugins/js/vue.min.js">
</script>
<script src="../../../plugins/js/vant.min.js"></script>
<!-- 引入 Axios 的 JS 文件 -->
<script src="../../../plugins/js/axios.min.js"></script>
<!-- 页面逻辑 -->
<script src="../../../plugins/js/index.js"></script>
</body>
</html>
